<?php
require dirname(__file__)."/lib/class.Puzzle.php";
$Puzzle=new Puzzle(5,5);
$movec=isset($_GET["movec"]) ? $_GET["movec"]:500;
$Puzzle=$Puzzle->generate((int)$movec,true);
$key1=findId($Puzzle->Puzzle_Arr,0);
$key2=array_search(0,$Puzzle->Puzzle_Arr[$key1]);
$sleep=isset($_GET["sleep"]) ? $_GET["sleep"]:50;
?>
<html>
	<head>
		<!-- Author:Bbaa -->
		<meta charset="UTF-8">
		<title>
			拼图
		</title>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js">
		</script>
		<link href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"
		rel="stylesheet">
		<script src="https://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js">
		</script>
		<!--<script src="https://cdn.bootcss.com/Chart.js/2.6.0/Chart.bundle.min.js"></script>-->
		<!--[if lt IE 10]>
			<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
			<script src="./ie.js"></script>
			<script src="./PIE_IE678_uncompressed.js"></script>
		<![endif]-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<style type="text/css">
			body {
				font-family: "微软雅黑","Microsoft YaHei";
				background:#eee;
				-moz-user-select: none;
				-webkit-user-select: none;
				user-select: none;
			}
		</style>
		<script>
			function getCookie(c_name)
			{
			if (document.cookie.length>0)
			  {
			  c_start=document.cookie.indexOf(c_name + "=")
			  if (c_start!=-1)
				{ 
				c_start=c_start + c_name.length+1 
				c_end=document.cookie.indexOf(";",c_start)
				if (c_end==-1) c_end=document.cookie.length
				return unescape(document.cookie.substring(c_start,c_end))
				} 
			  }
			return ""
			}

			function setCookie(c_name,value,expiredays)
			{
			var exdate=new Date()
			exdate.setDate(exdate.getDate()+expiredays)
			document.cookie=c_name+ "=" +escape(value)+
			((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
			}
				$(document).ready(function(){
					window.images={
						"ctx":$("canvas").get(0).getContext('2d'),
						"loop":"",
						"pic":[],
						"puzzle":<?php echo json_encode($Puzzle->Puzzle_Arr); ?>,
						"xy":[<?php echo $key1.",".$key2; ?>],
						"moveArr":"<?php echo $Puzzle->fuyuan; ?>".split(""),
						"move":function (str) {
							 switch(str) {
								case "1":
									if((this.xy[0]-1)!=-1) {
										this.puzzle[this.xy[0]][this.xy[1]]=this.puzzle[this.xy[0]-1][this.xy[1]];
										this.puzzle[this.xy[0]-=1][this.xy[1]]=0;
									}
								break;
								case "2":
									if((this.xy[0]+1)!=this.puzzle.length) {
										this.puzzle[this.xy[0]][this.xy[1]]=this.puzzle[this.xy[0]+1][this.xy[1]];
										this.puzzle[this.xy[0]+=1][this.xy[1]]=0;
									}
								break;
								case "3":
									if((this.xy[1]-1)!=-1) {
										this.puzzle[this.xy[0]][this.xy[1]]=this.puzzle[this.xy[0]][this.xy[1]-1];
										this.puzzle[this.xy[0]][this.xy[1]-=1]=0;
									}
								break;
								case "4":
									if((this.xy[1]+1)!=this.puzzle.length) {
										this.puzzle[this.xy[0]][this.xy[1]]=this.puzzle[this.xy[0]][this.xy[1]+1];
										this.puzzle[this.xy[0]][this.xy[1]+=1]=0;
									}
								break;
							 }
						},
						"init":function () {
							this.loop=setInterval(function(){window.images.play();},<?php  echo $sleep; ?>);
						},
						"play":function(){
							this.ctx.clearRect(0,0,500,500);
							var x=0;var y=0;
							for (var i=0;i<25;i++) {
								if(this.puzzle[Math.floor(i/5)][i%5]!=0) {
									this.ctx.drawImage(this.pic[this.puzzle[Math.floor(i/5)][i%5]-1],x,y);
								}
								x+=100;
								if(x==500) {y+=100;x=0;}
							}
							var mo=this.moveArr.splice(0,1).toString();
							if(mo!=="") {this.move(mo);} else {
								clearInterval(this.loop);
							}
						}
					};
					for (var i=0;i<24;i++) {
						var a=new Image();
						a.src="./image/"+i+".jpg";
						window.images.pic.push(a);
					}
					$(window.images.pic[23]).ready(function(){
						if(getCookie("Puzzle_ol")==null||getCookie("Puzzle_ol")=="") {
							var open=setTimeout(function(){images.init();setCookie("Puzzle_ol","dwddwdwd",7);clearTimeout(open);},5000);
						} else {
							images.init();
						}
						
					});
				});
		</script>
	</head>
	<body>
				<div class="container bs-docs-container">
			<div class="row">
				<div class="noselect panel panel-primary" style="margin:1% 1% 1% 1%;">
					<div class="panel-heading">
						<h3 class="panel-title">
							拼图demo
						</h3>
					</div>
						<div id="bd" style="margin:0% 5% 5% 5%;text-align:center;">
							<div class="login-top">
							</div>
							<br>
							<canvas width="500" height="500" style="border: 1px solid #428bca;border-radius: 4px;"></canvas>
							<div class="login-button">
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
</html>